<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loop For</title>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="module" src="../src/js/form.js"></script>
    <script type="module" src="../src/js/inputNumber.js"></script>
    <script type="module" src="../src/js/select.js"></script>
    <script type="module" src="../src/js/loopFor.js"></script>
    <script type="module" src="../src/js/loopItem.js"></script>
</head>

<body>
    <jsc-form class="form">
        <jsc-input-number value="123456" max="20000" min='100' decimals='2' placeholder='input' jscbind='age'>
        </jsc-input-number>
        <jsc-loop-for jscbind='skills' delnode='delItem'>
            <div><button class='addItem'>新增</button></div>
            <jsc-loop-item>
                <div style="border: 1px solid red;">
                    <label>Power</label>
                    <jsc-input-number value="123456" max="20000" min='100' decimals='2' placeholder='input'
                        jscbind='power'>
                    </jsc-input-number>
                    <jsc-select required value="1"
                        options='[{"value":1,"label":"选项选项选项选项选项选项选项选项选项选项选项001"},{"value":"2","label":"选项002"},{"value":"3","label":"选项003"},{"value":"4","label":"选项004"},{"value":"5","label":"选项005"}]'>
                    </jsc-select>
                    <button class="delItem">删除</button>
                </div>
            </jsc-loop-item>
        </jsc-loop-for>
        <jsc-input-number value="123456" max="20000" min='100' decimals='2' placeholder='input' jscbind='skills.0.power'
            readonly>
        </jsc-input-number>
    </jsc-form>
</body>
<script defer="true" type="text/javascript">
    let person = { 'age': 13, 'isAdmin': true, name: 'Lora', skills: [{ name: 'shoot', power: 15 }] };
    //, { name: 'jump', power: 64 }
    document.addEventListener('DOMContentLoaded', function (e) {
        let form = document.querySelector('.form');
        form.bind = person;

        document.querySelector('.addItem').addEventListener('click', function (e) {
            document.querySelector('jsc-loop-for').addLoopItemAtTail({ name: 'new'.concat(Date.now()), power: Date.now() });
        });
    });
</script>

</html>